<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/monokai_sublime.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400italic,700italic,700,400' rel='stylesheet' type='text/css'>
<style>
.post {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
}
.post p, .post ul {
  line-height: 30px;

}
pre {
  font-size: 18px;
  display: block;
  padding: 0;
  margin: 50px 0 50px 0;
  font-size: 18px;
  word-wrap: break-word;
  color: #333333;
  border: none;
  border-radius: 0;

}
h1,h2,h3,h4,h5 {
  margin: 20px 0 20px 0;
}
.divider {
  background: #dd4814; 
  color: #ebebeb; 
  padding: 5px;
  margin: 40px 0;
}
.divider h3 {
  font-size: 30px;
  margin: 10px 0;
}
li > code.hljs,
p > em > code.hljs,
p > code.hljs {
  display: inline;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background-color: #fff;
  line-height: 13px;
  overflow: hidden;
  color: #f92672;
  height: auto;
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  font-style: italic;
}
</style>


<div class="post" style="display: none;">
   {{{tute}}}
<div>

<div class="divider">

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h3>Author</h3>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="row">
        <div class="col-md-2">
          <img src="{{avatar}}" class="" style="width: 100%; border-radius: 3px;" />
        </div>
        <div class="col-md-10">
          <p><strong>{{author.name}}</strong>
          <p>{{author.description}}</p>
          <p>
          <a href="{{author.homepage}}">{{author.homepage}}</a><br />

          {{#author.twitter}}
            <i class="fa fa-twitter"></i>
          {{/author.twitter}}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="divider">

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h3>Related Tutorials</h3>
      </div>
    </div>
  </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">

            <p style="margin-bottom: 50px;">Do you think w3schools sucks? Do you think you could do a way better job? <br /> Now you can! <a href="https://github.com/cdnjs/tutorials" target="_blank">Submit your own community driven tutorials.</a></p>
            <table class="table table-hover" style="margin-top: 25px;">
                <thead>
                    <tr>
                        <td style="padding-left: 0;">Tutorial</td>
                        <td>Author</td>
                    </tr>
                </thead>
                <tbody>
                {{#tutorials}}
                    <tr>
                        <td style="padding-left: 0;"><a href="/libraries/{{library}}/tutorials/{{slug}}">{{name}}</a></td>
                        <td><a href="{{author.homepage}}">{{author.name}}</a></td>
                    </tr>
                {{/tutorials}}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="divider">

  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <h3>Comments</h3>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div id="disqus_thread"></div>
      <script type="text/javascript">
          /* * * CONFIGURATION VARIABLES * * */
          var disqus_shortname = '{{disqus_shortname}}';
          var disqus_url = '{{{disqus_url}}}';
          /* * * DON'T EDIT BELOW THIS LINE * * */
          (function() {
              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
              dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
      <script>
      </script>
    </div>
  </div>
</div>
